<template>
  <div>
    <div class="box">
      <!-- 筛选查询 -->
      <div class="list">
        <div>
          <img
            class="list-img"
            src="../../../assets/images/搜索小.png"
            alt=""
          />
        </div>
        <div>
          筛选查询
        </div>
      </div>
      <div class="search">
        <div class="search">
          <div class="whead">
            <div class="left">用户ID :</div>
            <el-input
              v-model="input"
              @change="btnchange(input)"
              style="width: 240px;"
              placeholder="用户ID"
            >
            </el-input>
          </div>
          <div class="whead">
            <div class="left">用户手机号 :</div>
            <el-input
              v-model="phone"
              @change="phoneChange(phone)"
              style="width: 240px;"
              placeholder="用户手机号"
            >
            </el-input>
          </div>
          <div class="whead">
            <div class="left">工单状态 :</div>
            <el-select
              v-model="staty"
              placeholder="全部"
              @change="statusChange(staty)"
            >
              <el-option
                v-for="item in statu"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="whead">
            <div class="left">申请时间 :</div>
            <el-date-picker
              v-model="timeInfo"
              @change="timeChange(timeInfo)"
              style="width: 240px;"
              prefix-icon="el-icon-time"
              type="daterange"
              range-separator="至"
              start-placeholder="申请时间"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </div>

        <div style="display: flex; height: 40px; margin-left: 100px;">
          <el-button type="primary" @click="btnSearch">搜索</el-button>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="lists">
        <div class="list">
          <div>
            <img
              class="list-img"
              src="../../../assets/images/查询数据列表.png"
              alt=""
            />
          </div>
          <div>
            数据列表
          </div>
        </div>
        <div style="margin-right: 20px;">
          <el-button
            v-on:click="exportBtn()"
            class="el-icon-upload"
            type="primary"
            size="small "
            >导出数据</el-button
          >
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table
        border
          ref="multipleTable"
          :data="listData"
          style="width: 100%"
          align="center"
          @selection-change="selRow"
          :row-key="getRowKeys"
        >
          <el-table-column
            type="selection"
            width="120px"
            align="center"
            :reserve-selection="true"
          ></el-table-column>

          <el-table-column
            prop="userId"
            label="用户ID"
            align="center"
          ></el-table-column>

          <el-table-column label="发票类型" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.type == 1 ? "电子发票" : "纸质发票" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发票性质" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.nature == 1 ? "个人发票" : "企业发票" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="header"
            label="发票抬头"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dutyParagraph"
            label="税号"
            align="center"
          ></el-table-column>
          <el-table-column label="邮箱/地址" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 2">
                {{ scope.row.address }}
              </div>
              <div v-if="scope.row.type == 1">
                {{ scope.row.email }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderNo"
            label="申请的订单"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="申请时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="updateTime"
            label="修改时间"
            align="center"
          ></el-table-column>
          <el-table-column prop="status" label="工单状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1">
                开票中
              </div>
              <div v-if="scope.row.status == 2">
                已开票
              </div>
              <div v-if="scope.row.status == 3">
                已关闭
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status == 1"
                @click="handleClick(scope.row.id)"
                type="primary"
                size="small"
                >标记为已发</el-button
              >
              <el-button
                v-if="scope.row.status == 2"
                type="success"
                size="small"
                >已开票</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-checkbox
        style="margin:10px 2.2%;"
          label="全选"
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="selAll()"
        ></el-checkbox>
        <div class="block" style="margin-top:15px;">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { invoiceRecord, exportInvoiceExcel, openStatus } from "@/api/user";
export default {
  data() {
    return {
      input: "", //搜索
      phone: "", //手机号搜索
      timeInfo: "", //日期选择
      staty: "", //工单状态
      loading: false,
      selectedAssetsList: [], // 该数组对象
      assetsUidList: [], // 下标值
      currentPage: 1, //当前页数
      pageSize: 10, //每页条数
      total: 0, //总条目数
      listData: [],
      dutyParagraph: "", //税号
      header: "", //抬头
      nature: 0, //发票性质 0.所有 1.个人发票 2.企业发票
      beginDate: "", //申请时间
      endDate: "", //结束时间
      userId: "", //用户ID
      phoneNumber: "", //用户手机号
      realName: "", //用户姓名
      status: 0, //开票状态 0.所有 1.开票中 2.已开票 3.已关闭
      type: 0, //发票类型 0.所有 1.电子发票 2.纸质发票
      statu: [
        {
          value: 1,
          label: "开票中"
        },
        {
          value: 2,
          label: "已开票"
        },
        {
          value: 3,
          label: "已关闭"
        }
      ],
      selectedAssetsList: [],
      assetsUidList: [],
      isIndeterminate: false, //对el-checkbox控制不完整的全选状态
      checkAll: false, //对el-checkbox控制全选状态
      newTabledata: [],
    };
  },
  created() {
    this.invoiceRecord(this.pageSize, this.currentPage);
    this.search();
  },
  methods: {
    getRowKeys(row) {
      // id 是后台传递的每行信息唯一标识
      return row.id;
    },
    search() {
      this.listData = this.newTabledata.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    //全选按键功能实现
    selAll() {
      if (
        this.$refs.multipleTable.selection.length < this.newTabledata.length
      ) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
      if (this.checkAll) {
        this.newTabledata.forEach(row => {
          if (row.status == 1) {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        this.selectedAssetsList = [];
        this.assetsUidList = [];
      }
    },
    stateChange() {
      var vm = this;
      if (
        vm.assetsUidList.length < this.newTabledata.length &&
        vm.assetsUidList.length > 0
      ) {
        this.isIndeterminate = true;
      } else if (vm.assetsUidList.length == this.newTabledata.length) {
        this.isIndeterminate = false;
        this.checkAll = true;
      } else if (vm.assetsUidList.length == 0) {
        this.isIndeterminate = false;
        this.checkAll = false;
      }
    },
    //表格内checkbox触发的全选按钮状态变化
    selRow(val) {
      const vm = this;
      vm.selectedAssetsList = Array.from(
        new Set([...vm.selectedAssetsList, ...val])
      );
      // 选择的行的完整数据。
      const currentArr = val.map(item => item.id);
      const arr1 = [...vm.assetsUidList, ...currentArr];
      vm.assetsUidList = Array.from(new Set(arr1));
      const tableData = vm.listData.map(item => item.id);
      const difference = tableData.filter(v => !currentArr.includes(v));
      difference.forEach(item => {
        if (vm.assetsUidList.indexOf(item) !== -1) {
          vm.assetsUidList.splice(vm.assetsUidList.indexOf(item), 1);
        }
      });

      // 把选中的行数据进行去重。
      var list = vm.selectedAssetsList.filter(
        item => vm.assetsUidList.indexOf(item.id) != -1
      );
      for (var i = 0; i < list.length; i++) {
        for (var j = i + 1; j < list.length; j++) {
          if (list[i].id == list[j].id) {
            list.splice(j, 1);
            j--;
          }
        }
      }
      setTimeout(() => {
        this.stateChange();
      }, 0);
    },
    // //多选后数据变化
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    //   console.log(this.multipleSelection);
    // },
    // //全选按钮
    // SelectAll(rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection(); //清除全选
    //   }
    // },
    // 导出数据
    async exportBtn() {
      let data = {
        limit: this.pageSize,
        page: this.currentPage,
        reservoirId: this.reservoirId,
        source: this.source,
        status: this.staty
      };
      let result = await exportInvoiceExcel(data);
      if (result.code == 0) {
        // 下载文件
        window.location.href =
          process.env.VUE_APP_BASE_API +
          "/file/export/exportInfo?fileName=" +
          result.data;
      }
    },
    async invoiceRecord(limit, page) {
      let data = {
        limit: this.pageSize,
        page: this.currentPage,
        beginDate: this.beginDate,
        dutyParagraph: this.dutyParagraph,
        endDate: this.endDate,
        nature: this.nature,
        userId: this.userId,
        phoneNumber: this.phoneNumber,
        realName: this.realName,
        status: this.staty,
        type: this.type
      };
      let result = await invoiceRecord(data);
      if (result.code == 0) {
        this.listData = result.data.records;
        this.newTabledata = result.data.records;
        this.pageSize = result.data.limit;
        this.total = result.data.total;
      }
      this.listData.forEach(element => {
        if (element.agentLevel == 2) {
          element.agentLevel = "省级代理";
        } else {
          element.agentLevel = "市级代理";
        }
      });
    },
    // 修改状态
    handleClick(e) {
      this.$confirm("确定要标记为已发吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async () => {
          let data = {
            id: e,
            status: 2
          };
          let result = await openStatus(data);
          if (result.code == 0) {
            this.invoiceRecord();
            this.$message({
              type: "success",
              message: result.message
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.invoiceRecord(this.pageSize, this.currentPage);
      this.search();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.invoiceRecord(this.pageSize, this.currentPage);
      this.search();
    },
    //  搜索用户ID
    btnchange(e) {
      this.userId = e;
      this.invoiceRecord(this.pageSize, this.currentPage);
    },
    //手机号输入框数据
    phoneChange(e) {
      this.phoneNumber = e;
      this.invoiceRecord(this.pageSize, this.currentPage);
    },
    // 时间选择
    timeChange(e) {
      if (e) {
        this.beginDate = e[0];
        this.endDate = e[1];
      } else {
        this.beginDate = "";
        this.endDate = "";
      }

      this.invoiceRecord(this.pageSize, this.currentPage);
    },
    // 工单状态搜索
    statusChange(e) {
      this.staty = e;
      this.invoiceRecord(this.pageSize, this.currentPage);
    },
    btnSearch(e) {
      this.invoiceRecord(this.pageSize, this.currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>
.left {
  margin-right: 10px;
}
.box {
  border: 1px solid #ccc;
  width: 98%;
  margin: 10px auto;
}

.list {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;

  .list-img {
    width: 20px;
    height: 20px;
  }
}

.lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  height: 50px;
  background-color: #f3f3f3;
  color: #666;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #1abc9c !important;
  color: #fff;
}

.search {
  display: flex;
  align-items: center;
  height: 80px;
  line-height: 80px;
  margin: 0 20px;
}

.whead {
  width: 400px;
  display: -webkit-box;
}
</style>
